<template>
  <div>
    <p>Has published books:</p>
    <span>{{ publishedBooksMessage }}</span>
    <hr />
    <button @click="add">
      push
    </button>
    <button @click="remove">
      pop
    </button>
    <hr />
    <div>{{fullName}}</div>
    <button @click="changeName">
      changeName
    </button>
  </div>
</template>

<script setup>
import { reactive, computed, ref } from "vue";

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

const firstName = ref('John')
const lastName = ref('Doe')

// computed() 方法期望接收一个 getter 函数，返回值为一个计算属性 ref。和其他一般的 ref 类似，你可以通过 publishedBooksMessage.value 访问计算结果
// 计算属性值会基于其响应式依赖被缓存。
const publishedBooksMessage = computed(() => {
  return author.books.length > 3 ? 'YES' : 'NO'
})

function add() {
  let item = 'Vue 5 - unknown'
  author.books.push(item)
}
function remove() {
  author.books.pop()
}

// 计算属性 相当于临时快照 更改临时快照是没有意义的 因此计算属性的值应该被视为只读的
const fullName = computed({
  // getter
  get() {
    console.log('属性被访问了')
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    console.log('属性被修改了');
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

function changeName() {
  console.log(fullName.value)
  fullName.value = 'John Doe'
}
</script>